<template>
  <div>
    <Head />

    <!-- bookInfo start-->
    <div class="bookInfo-area">
      <div class="container">
        <div class="row">
          <div class="Breadcrumb">
            <el-page-header title="返回" content="图书详情" @back="goBack" />
          </div>
          <div class="bookDetails shadow" prop="post">
            <div class="bookCover">
              <img :src="post.cover" alt="image">
            </div>
            <div class="bookItems">
              <p>商品编号: {{ post.id }}</p>
              <p>单价: <span style="font-size: 20px;color: #e63946;font-weight: 700;">￥{{ post.price }}</span></p>
              <p>书名: {{ post.bookName }}</p>
              <p>作者: {{ post.author }}</p>
              <p>出版社: {{ post.press }}</p>
              <p>出版时间: {{ post.publishingTime }}</p>
              <p>印刷时间: {{ post.printingTime }}</p>
              <div class="count">
                <el-input-number
                  v-model="num"
                  :min="1"
                  :max="999"
                  label="描述文字"
                  :style="{marginTop: '50px',marginLeft: '30px'}"
                  @change="handleChange"
                />
                <div class="btn">
                  <el-button type="success" :plain="true" style="margin: 40px 30px;color: #fff;font-family: 'Courier New', Courier, monospace;background: linear-gradient(to left,#ff97b7, #02c39a);" @click="addCar()">加入购物车</el-button>
                  <el-button type="success" :plain="true" style="color: #fff;font-family: 'Courier New', Courier, monospace;background: linear-gradient(to left,#ff97b7, #02c39a);" @click="buyItem()">购买</el-button>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- bookInfo end-->

    <Foot />

  </div>
</template>

<script>
import userApi from '@/api/user'
import Head from '@/views/user/component/Head'
import Foot from '@/views/user/component/Footer'

export default {
  components: { Head, Foot },
  inject: ['reload'],
  data() {
    return {
      num: 1,
      userId: 0,
      post: {
        cover: 'https://hxx-gulixy.oss-cn-beijing.aliyuncs.com/2021/04/02/964593447b434a7c82e7e1548d2d7ec8hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'
      }
    }
  },
  created: async function() {
    // 接受参数
    if (JSON.stringify(this.$route.query) !== '{}') {
      this.userId = this.$store.getters.token
      await userApi.getBookById(this.$route.query.id).then(resp => {
        this.post = resp.data.data[this.$route.query.id]
      }, err => {
        console.log(err)
      })
    } else {
      this.$message({
        message: '加载错误！',
        type: 'error'
      })
    }
  },
  methods: {
    handleChange(value) {
      // console.log(value)
    },
    addCar() {
      if (this.userId) {
        userApi.addCart({
          'bookId': this.$route.query.id,
          'bookNumber': this.num
        }).then(resp => {
          resp.data.code === 200 ? this.$message.success('已加入购物车！') : this.$message.error('加入购物车失败！')
        })
      } else {
        this.$router.push({
          // 若未登录  不能添加到购物车  推送至登陆界面
          path: '/userLogin'
        })
        this.$message({
          message: '请登录！',
          type: 'warning',
          duration: 2000
        }, err => {
          console.log(err)
        })
      }
    },
    buyItem() {
      if (this.userId) {
        this.addCar()
        var order = []
        order.push({
          'bookId': this.$route.query.id,
          'bookNumber': this.num
        })
        userApi.createOrder(order).then(async resp => {
          var { notEnoughInventories } = resp.data.data
          if (notEnoughInventories) {
            var books = []
            for (let i = 0; i < notEnoughInventories.length; i++) {
              const bookId = notEnoughInventories[i].bookId
              const bookNumber = notEnoughInventories[i].number
              await userApi.getBookById(bookId).then(resp => {
                var book = resp.data.data[bookId]
                books.push(book.bookName + '剩余' + bookNumber + '本')
              })
            }
            this.$notify({
              title: '库存不足',
              message: JSON.stringify({ 图书: books }) + '，库存暂时不足,未生成订单。',
              position: 'top-left'
            })
          } else {
            this.$message.success('订单生成成功！')
          }
        }, err => {
          this.$message({
            message: '订单生成异常！',
            type: 'error',
            duration: 2000
          })
          console.log(err)
        })
      } else {
        this.$router.push({
          // 若未登录  不能添加到购物车  推送至登陆界面
          path: '/userLogin'
        })
        this.$message({
          message: '请登录！',
          type: 'warning',
          duration: 2000
        }, err => {
          console.log(err)
        })
      }
    },
    goBack() {
      this.$router.push({ path: '/' })
    }
  }
}
</script>

<style scoped>
.container {
    width: 100%;
    max-width: 1140px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.bookInfo-area {
  margin-top: 30px;
  margin-bottom: 70px;
}
.row {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.bookInfo-area .row .Breadcrumb {
  display: flex;
  width: 100%;
  justify-content: flex-start;
}
.bookDetails {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-radius: 10px;
  background: #faf6f6;
  margin-top: 30px;
}
.bookCover {
  flex: 1;
  padding: 20px;
}
.bookCover img {
  width: 530px;
  height: 575px;
  max-width: 530px;
  max-height: 575px;
  border-radius: 10px;
}
.bookItems {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-top: 20px;
  flex: 1;
}
.bookItems p {
  font-family: 'Courier New', Courier, monospace;
  font-size: 16px;
}

.shadow {
    position: relative;
    /* max-width: 270px; */
    box-shadow: 0px 1px 4px rgba(0,0,0,0.3),
                0px 0px 20px rgba(0,0,0,0.1) inset;
}
.shadow::before,
.shadow::after {
   content:"";
   position:absolute;
   z-index:-1;
}
.shadow::before,
.shadow::after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
}
.shadow::before,
.shadow::after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   transform:rotate(-3deg);
}
.shadow::after{
   right:10px;
   left:auto;
   transform:rotate(3deg);
 }
</style>
